<template>
	<view class="container">
		<view class="form">
			<view class="row has_lb">
				<view class="lb">
					<text>收货人</text>
				</view>
				
				<input class="input" type="text" v-model="name" placeholder="请填写收货人姓名"/>
			</view>
			
			<view class="row has_lb">
				<view class="lb">
					<text>手机号码</text>
				</view>
				
				<input class="input" type="text" v-model="mobile" placeholder="请填写收货人手机号码"/>
			</view>
			
			<view class="row">
				<navigator url="/pages/common/city-three-list/city-three-list" class="go">{{area}}</navigator>
				
				<image src="../../../static/fanli/9.png" mode="" class="next"></image>
			</view>
			
			<view class="row">
				<input class="input" type="text" v-model="address" placeholder="街道、楼牌号等"/>
			</view>
			
			<view class="row flex bd0">
				<view class="go">设置默认地址</view>
				
				<switch :checked="isDefault" @change="handleChange"/>
			</view>
		</view>
		
		<view class="footer">
			<view class="btn" @click="onSaveClick">
				<text>保存</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { 
		JSMRequest
	} from '@/module/api'
	import { formatDateTime } from '@/common/util'
    import WxNotificationCenter from '@/libs/WxNotificationCenter/wxnotificationcenter'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	
	const _ = require("@/libs/underscore/underscore-min.js")._
	
	export default {
		data() {
			return {
				id: null,
				area: '所在地区',
				province_id: null,
				city_id: null,
				area_id: null,
				name: null,
				mobile: null,
				address: null,
				isDefault: false,
			};
		},
		
		computed: {
			shareAppMessage () {
				return this.$store.state.shareAppMessage
			},
			
			userInfo () {
				return this.$store.state.userInfo
			}
		},
		
		onLoad(options) {
			let _t = this
			
			if(options.item){
				let params = JSON.parse(options.item)
				console.log(params)
				this.id = params.id
				this.area = params.province_name + params.city_name + params.area_name
				this.province_id = params.province
				this.city_id = params.city
				this.area_id = params.area
				this.name = params.name
				this.mobile = params.mobile
				this.address = params.address.split(params.province_name+params.city_name+params.area_name)[1]
				this.isDefault = params.default
				
				uni.setNavigationBarTitle({
					title: "编辑地址"
				})
			}else{
				uni.setNavigationBarTitle({
					title: "新增地址"
				})
			}
			
			WxNotificationCenter.addNotification("refreshCityNotice", params => {
				console.log(params)
				_t.area = params.province.name + params.province.name + params.area.name
				_t.province_id = params.province.id
				_t.city_id = params.city.id
				_t.area_id = params.area.id
			}, this)
		},
		
		onUnload() {
			WxNotificationCenter.removeNotification("refreshCityNotice", this)
		},
		
		methods:{
			onSaveClick () {
				let _t = this
				
				if(_.isEmpty(this.name))return false;
				if(_.isEmpty(this.mobile))return false;
				if(_.isEmpty(this.address))return false;
				if(this.province_id==null)return false;
				if(this.city_id==null)return false;
				if(this.area_id==null)return false;
				
				let data = {
					// uid: this.userInfo.id,
					name: this.name,
					address: this.area + this.address,
					province: this.province_id,
					city: this.city_id,
					area: this.area_id,
					mobile: this.mobile,
					default: this.isDefault ? 1 : 0
				}
				
				// if(this.id!=null) data.id = this.id
				
				uni.showLoading({
					mask: true,
					title: '请求中...'
				})
				
				JSMRequest({
					tag: "jsm-address-edit",
					method: "POST",
					params: data,
				}).then(({data}) => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: "操作成功"
					})
					WxNotificationCenter.postNotificationName("event_refresh_user_address", {})
					setTimeout(() => {
						uni.navigateBack({
							
						})
					}, 300)
				}).catch(e => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: e.msg
					})
				})
				
			},
			
			handleChange (e) {
				// console.log(e)
				this.isDefault = e.detail.value
			}
		}
	}
</script>

<style lang="less" scoped>
	.container{
		padding-bottom: 120px;
	}
	
	.footer{
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		height: 100px;
		background: #FFFFFF;
		z-index: 10;
		box-shadow: 0px -4px 16px 0px rgba(122,142,216,0.27);
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		
		.btn{
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg,rgba(232,39,32,1) 0%,rgba(255,77,123,1) 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			
			text{
				font-size: 32px;
				color: #FFFFFF;
			}
		}
	}
	
	.form{
		width: 690px;
		margin: 0 auto;
		
		.row{
			border-bottom: 1px solid #f5f5f5;
			position: relative;
			
			&.has_lb{
				padding-top: 40px;
			}
			
			&.bd0{
				border-bottom-width: 0;
			}
			
			&.flex{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			
			.lb{
				height: 40px;
				position: absolute;
				left: 0;
				top: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				
				text{
					font-size: 24px;
					color: #999999;
				}
				
				.b{
					color: #FF2D5E;
				}
			}
			
			.input{
				width: 100%;
				height: 100px;
				font-size: 30px;
				color: #333333;
			}
			
			.next{
				position: absolute;
				right: 0;
				top: 32px;
				width: 36px;
				height: 36px;
			}
			
			.go{
				line-height: 100px;
				width: 100%;
				height: 100px;
				font-size: 30px;
				color: #333333;
			}
		}
	}
	
</style>
